<template>
  <chart :auto-resize="true" :options="options"></chart>
</template>

<script>
export default {
  name: "Ren",
  data() {
    return {
      options: {
        tooltip: {
          trigger: "item",
          formatter: " <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "horizontal",
          bottom: "-8",
          data: ["总人数", "员工", "访客", "安保"],
          textStyle: {
            color: ["#2bd9e4", "#83f4fa", "#00a3ad"],
          },
        },
        title: {
          text: `总人数`,
          left: "center",
          top: "57%", //top待调整
          textStyle: {
            color: "#fff",
            fontSize: 13,
          },
        },
        graphic: {
          type: "text",
          left: "center",
          top: "40%",
          style: {
            text: "3086",
            fill: "#48EAFF",
            fontSize: 32,
            fontFamily: "YouSheBiaoTiHei",
          },
        },
        series: [
          {
            // name: '访问来源',
            type: "pie",
            radius: ["60%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "left",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "14",
                // fontWeight: "bold",
                color: "#2769f7",
              },
            },

            data: [
              {
                value: 2565,
                name: "员工",
                itemStyle: {
                  normal: {
                    borderWidth: 8,
                    borderColor: {
                      colorStops: [
                        {
                          offset: 0,
                          //   黄
                          color:
                            "rgba(43, 217, 228, 50)" || "rgba(43, 217, 228, 1)", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          //   蓝色
                          color:
                            "rgba(43, 217, 228, 1)" || "rgba(43, 217, 228, 1)", // 100% 处的颜色
                        },
                      ],
                    },
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          //   黄色
                          color:
                            "rgba(43, 217, 228, 1)" || "rgba(43, 217, 228, 1)", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          //   蓝色
                          color:
                            "rgba(43, 217, 228, 1)" || "rgba(43, 217, 228, 1)", // 100% 处的颜色
                        },
                      ],
                    },
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                },
              },
              {
                value: 471,
                name: "访客",
                itemStyle: {
                  normal: {
                    borderWidth: 8,
                    borderColor: {
                      colorStops: [
                        {
                          offset: 0,
                          color:
                            "rgba(0, 163, 173, 1)" || "rgba(0, 163, 173, 1)", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color:
                            "rgba(0, 163, 173, 1)" || "rgba(0, 163, 173, 1)", // 100% 处的颜色
                        },
                      ],
                    },
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color:
                            "rgba(0, 163, 173, 1)" || "rgba(0, 163, 173, 1)", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color:
                            "rgba(0, 163, 173, 1)" || "rgba(0, 163, 173, 1)", // 100% 处的颜色
                        },
                      ],
                    },
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                },
              },
              {
                value: 50,
                name: "安保",
                itemStyle: {
                  normal: {
                    borderWidth: 8,
                    borderColor: {
                      colorStops: [
                        {
                          offset: 0,
                          color:
                            "rgba(132, 244, 251, 1)" ||
                            "rgba(132, 244, 251, 1)", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color:
                            "rgba(132, 244, 251, 1)" ||
                            "rgba(132, 244, 251, 1)", // 100% 处的颜色
                        },
                      ],
                    },
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color:
                            "rgba(132, 244, 251, 1)" ||
                            "rgba(132, 244, 251, 1)", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color:
                            "rgba(132, 244, 251, 1)" ||
                            "rgba(132, 244, 251, 1)", // 100% 处的颜色
                        },
                      ],
                    },
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                },
              },
            ],
          },
        ],
      },
    };
  },
};
</script>
